<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS --><!--地址改成从cdn服务器 稳定性高-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            background-color: #475669;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row gutter="20">
        <el-col span="4" v-for="item in 6">
            <el-card>
                <h1>{{item}}</h1>
            </el-card>
        </el-col>
    </el-row>

    <el-row gutter="20">
        <el-col span="6" v-for="item in 4">
            <el-card>
                <img src="../b.jpg" width="100%">
            </el-card>
        </el-col>
    </el-row>


    <el-card style="width: 400px;height: 300px;margin: 0 auto">
        <el-form label-width="60px">
            <el-form-item label="用户名">
                <el-input type="text" placeholder="请输入用户名" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user:{username:"",password:""}
            }
        },
        methods: {}
    })
</script>
</html>